<template>
	<div class="bashi-map">
		<div class="bashi-chart" :id="mapId"></div>
	</div>
</template>

<script>
import "@/const/mapJson/bashi-map";
import {bashiGeoCoordMap} from "./staticdata";

export default {
	name: "bashi-map",
	components: {},
	props: {
		mapData: {
			type: Object,
			default: () => {
				return {};
			},
		},
		mapId: {
			type: String,
			default: "world-content",
		},
		mapSize: {
			type: Object,
			default: () => {
				return {
					change: false,
					size: [
						{geoTop: "9%", size: "1.2"},
						{mapTop: "8%", size: "1.2"},
					],
				};
			},
		},
		visualMap: {
			type: '',
			default: [
				{min: 8, max: 10, label: "8亿-10亿", color: "#d2a05a"},
				{min: 5, max: 8, label: "5亿-8亿", color: "#53c9a3"},
				{min: 2, max: 5, label: "2亿-5亿", color: "#29b6dd"},
				{max: 2, label: "2亿以下", color: "#6a7be8"},
			],
		},
	},
	data() {
		return {
			geoCoordMap: bashiGeoCoordMap,
			imgSrc: require('@/assets/images/active_one_industry.png')
		};
	},
	computed: {},
	created() {
		this.$nextTick(() => {
			this.init();
		});
	},
	mounted() {
	},
	methods: {
		init() {
			// let geoCoordMap = this.geoCoordMap;
			let mapData = this.mapData.mapData;
			let effectData = this.mapData.effectData;
			let scatterData = this.mapData.scatterData;
			let locationData = this.mapData.locationData;
			// let convertData = function (data) {
			// 	let res = [];
			// 	for (let i = 0; i < data.length; i++) {
			// 		let geoCoord = geoCoordMap[data[i].name];
			// 		if (geoCoord) {
			// 			res.push({
			// 				name: data[i].name,
			// 				value: geoCoord.concat(data[i].value),
			// 			});
			// 		}
			// 	}
			// 	return res;
			// };
			let option = {
				backgroundColor: "transparent",
				tooltip: {
					show: true,
					formatter: (params) => {
						let res = "";
						if (params.seriesType === 'map') {
							if (this.mapData.ifCottonMap) {
								res = params.data.name + "<br/>";
								res += this.mapData.tooltip[0] + params.data.value[0] + params.data.unit[0] + "<br/>";
								res += this.mapData.tooltip[1] + params.data.value[1] + params.data.unit[1];
							} else {
								if (params.value && Number(params.value) > 0) {
									res = params.data.name + "<br/>";
									res += this.mapData.tooltip
										? this.mapData.tooltip + params.data.value + params.data.unit || '万元'
										: '生产总值：' + params.data.value + params.data.unit || '万元';
								}
							}
						} else if (params.seriesType === 'scatter' || params.seriesType === 'effectScatter') {
							if (params.value) {
								if (this.mapData.ifCottonMap) {
									res = params.data.name + "<br/>";
									res += this.mapData.tooltip[0] + params.data.value[2] + params.data.unit[0] + "<br/>";
									res += this.mapData.tooltip[1] + params.data.value[3] + params.data.unit[1];
								} else if (params.value) {
									if (params.data.value[2] == undefined) {
										res = params.data.name + "<br/>";
									}else {
										res = params.data.name + "<br/>";
										res += this.mapData.tooltip
											? this.mapData.tooltip + params.data.value[2] + params.data.unit || '万元'
											: '生产总值：' + params.data.value[2] + params.data.unit || '万元';
									}
								}
							}
						}
						return res;
					},
				},
				geo: {
					map: "bashi",
					label: {
						show: false,
						emphasis: {
							show: false,
						},
					},
					top: this.mapSize.size[0].geoTop,
					zoom: this.mapSize.size[0].size,
					itemStyle: {
            show: false,
						normal: {
							areaColor: "rgba(84, 225, 220, 0.45)",
						},
					},
					silent: true
				},
				series: [
					{
						name: "八师",
						type: "map",
						mapType: "bashi",
						top: this.mapSize.size[1].mapTop,
						zoom: this.mapSize.size[1].size,
						itemStyle: {
							normal: {
								areaColor: 'rgba(84, 225, 220, 0.45)',
								borderColor: 'rgba(84, 225, 220, 1)',
								borderWidth: 1,
								opacity: 1,
							},
							emphasis: {
								label: {
									show: false
								},
								areaColor: 'rgba(23, 189, 191, 1)',
								borderColor: 'rgba(23, 189, 191,1)',
								borderWidth: 1,
								opacity: 1,
							}
						},
						data: mapData,
						label: {
							normal: {
								show: false,
								color: "#E8EFEF",
								emphasis: {
									color: "#E8EFEF",
								},
								formatter: function(params){
									return params.name
								},
								lineHeight: 20,
								backgroundColor:'RGBA(0, 183, 188, 0.65)',
								borderColor:'RGBA(55, 255, 255, 0.65)',
								borderWidth:'1',
								padding:[5,15,4]
							},
							emphasis:{
								show: true,
								color: "#E8EFEF",
								emphasis: {
									color: "#E8EFEF",
								},
								formatter: function(params){
									return params.name
								},
								lineHeight: 20,
								backgroundColor:'RGBA(193, 196, 63, 0.65)',
								borderColor:'RGBA(255, 218, 77, 0.65)',
								borderWidth:'1',
								padding:[5,15,4]
							}
						},
					},
					{
						type: "scatter",
						coordinateSystem: "geo",
						data: scatterData,
						symbolSize: (params) => {
							if (this.mapData.ifCottonMap) {
								return params[4]
							} else {
								return params[3]
							}
						},
						encode: {
							value: 2,
						},
						showEffectOn: "render",
						hoverAnimation: true,
						label: {
							show: false,
						},
						emphasis: {
							label: {
								show: false,
							},
						},
						itemStyle: {
							color: "#ff800f",
							shadowBlur: 20,
							shadowColor: "#000",
							// opacity:0.7
						},
						zlevel: 2,
					},
					{
						name: "Top",
						type: "effectScatter",
						coordinateSystem: "geo",
						data: effectData,
						symbolSize: 30,
						symbolOffset: [-15, 0],
						encode: {
							value: 2,
						},
						showEffectOn: "render",
						rippleEffect: {
							brushType: "stroke",
							scale: 4,
							color: "#f62157",
						},
						hoverAnimation: true,
						label: {
							show: false,
							color: "#fff",
						},
						itemStyle: {
							color: "#f62157",
						},
						zlevel: 1,
					},
				]
				/*series: [
					//南京地图每个涟漪散点的数据
					{
						name: "Top",
						type: "effectScatter",
						coordinateSystem: "geo",
						data: convertData(effectData),
						symbolSize: 20,
						symbolOffset: [-15, 0],
						encode: {
							value: 2,
						},
						showEffectOn: "render",
						rippleEffect: {
							brushType: "fill",
							color: "#f62157",
						},
						hoverAnimation: true,
						label: {
							formatter: function (params) {
								let name = params.name;
								let value = params.value[2];
								// let res = "{num|" + value + "}\n{name|" + name + "}";
								let res = value + "\n" + name;
								return res;
							},
							rich: {
								num: {
									color: "#fff",
									// padding:[0,0,2,0]
								},
								name: {
									color: "#fff",
									align: "center",
									padding: [0, 0, 2, 0],
								},
							},
							show: true,
							color: "#fff",
						},
						itemStyle: {
							color: "#f62157",
						},
						zlevel: 1,
					},
					{
						type: "scatter",
						coordinateSystem: "geo",
						data: scatterData,
						symbolSize: 15,
						encode: {
							value: 2,
						},
						showEffectOn: "render",
						hoverAnimation: true,
						label: {
							formatter: function (params) {
								let name = params.name;
								let value = params.value[2];
								let res = name + "\n" + value;
								return res;
							},
							show: false,
							color: "#fff",
						},
						emphasis: {
							label: {
								show: false,
							},
						},
						itemStyle: {
							color: "#ff800f",
							shadowBlur: 20,
							shadowColor: "#000",
							// opacity:0.7
						},
						zlevel: 2,
					},
					{
						type: "effectScatter",
						coordinateSystem: "geo",
						zlevel: 2,
						label: {
							normal: {
								show: false,
								position: "top",
								offset: [0, -20],
								color: "#fff",
								formatter: "{b}",
								textStyle: {
									color: "#fff",
									fontSize: 20,
								},
							},
							emphasis: {
								show: false,
								color: "#fff",
							},
						},
						symbol: "circle",
						rippleEffect: {
							scale: 4,
							//                    brushType: 'stroke'
						},
						symbolSize: 7,
						symbolOffset: [15, 10],
						itemStyle: {
							normal: {
								show: true,
								color: "#fff",
							},
						},
						data: locationData,
					},
					{
						type: "scatter",
						coordinateSystem: "geo",
						data: locationData,
						symbol: "pin",
						symbolSize: 20,
						symbolOffset: [15, 10],
						encode: {
							value: 2,
						},
						hoverAnimation: true,
						label: {
							formatter: function (params) {
								let name = params.name;
								let value = params.value[2];
								let res = name + "\n" + value;
								return res;
							},
							show: false,
							color: "#fff",
						},
						emphasis: {
							label: {
								show: false,
							},
						},
						itemStyle: {
							color: "#49fad8",
							// shadowBlur: 20,
							// shadowColor: '#000',
							// opacity:0.7
						},
						zlevel: 2,
					},
				],*/
			};
			this.$nextTick(() => {
				let chart = this.$echarts.init(document.getElementById(this.mapId));
				chart.clear();
				chart.setOption(option);
				chart.resize();
				chart.on("mouseover", (params) => {
					if (params.seriesType === 'map' && params.name === '') {
						chart.dispatchAction({
							type: 'downplay'
						});
					}
					if (params.seriesIndex === 1) {
						console.log("点击每个涟漪散点", params.data, params.value);
					}
					if (params.seriesIndex === 2) {
						console.log("点击每个散点", params.data, params.value);
					}
				});
				chart.on("click", function (params) {
					if (params.seriesIndex === 0) {
						console.log("点击地图每块", params.data, params.value);
					}
					if (params.seriesIndex === 1) {
						console.log("点击每个涟漪散点", params.data, params.value);
					}
					if (params.seriesIndex === 2) {
						console.log("点击每个散点", params.data, params.value);
					}
				});
			});
		},
	},
	watch: {
		mapData: {
			handler(cval, oval) {
				this.$nextTick(() => {
					this.init();
				});
			},
			deep: true,
		},
	},
};
</script>

<style scoped lang="scss">
.bashi-map {
	width: 100%;
	height: 100%;

	.bashi-chart {
		width: 100%;
		height: 100%;
	}
}
</style>
